<template>
  <div class="infoBox">
    <div class="">
        <div class="font34 line2 bold">{{tableInfo.shopName}}</div>
        <div class="font24 line2"><span>{{tableInfo.tableName}}</span>&emsp;<span>{{tableInfo.num}}人就餐</span></div>
    </div>
    <div class="btnBox">
        <!-- <i class="iconBtn ring"></i> -->
        <i class="iconBtn search" @click="toSearchHandler"></i>
        <i class="iconBtn menu" @click="toOrderList"></i>
    </div>
  </div>
</template>
<script>
export default {
    props:{
        tableInfo:{
            type: Object,
            default: function(){
                return {}
            }
        }
    },
    methods:{
        toSearchHandler(){
            this.$router.push({path:'/search'}); 
        },
        toOrderList(){
            this.$router.push({path:'/orderList'}); 
        }
    }
}
</script>
<style lang="scss" scoped>
    @import '@/assets/scss/index.scss';
    .infoBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 3.85rem;
        padding: 0 5.3%;
        background-color: #ffe16f;
        .btnBox{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .iconBtn{
                display: block;
                width: 1rem;
                height: 1rem;
                margin-right: 0.8rem;
                background: url(~@/assets/ringIcon.png) no-repeat;
                background-size: cover;
                &.search{
                    background: url(~@/assets/searchIcon.png) no-repeat;
                    background-size: cover;
                }
                &.menu{
                    background: url(~@/assets/menuIcon.png) no-repeat;
                    background-size: cover;
                }
            }
        }
    }
</style>